.first {
  width: 60px;
  height: 46px;
  background-color: red;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 0 2px 2px #ccc;
  .left {
    width: 14px;
    background-color: #001529;
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .top {
      height: 14px;
    }
    .bottom {
      flex: 1;
      background-color: #ccc;
    }
  }
}

.secend {
  width: 60px;
  height: 46px;
  background-color: red;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 2px 2px #ccc;

  .top {
    height: 14px;
    background-color: #001529;
  }
  .bottom {
    flex: 1;
    background-color: #ccc;
  }
}

.third {
  width: 60px;
  height: 46px;
  background-color: red;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 2px 2px #ccc;

  .top {
    height: 14px;
    background-color: #001529;
  }
  .bottom {
    flex: 1;
    background-color: #ccc;
    display: flex;
    .left {
      width: 14px;
      background-color: white;
    }
  }
}


.active {
  // border: 1px solid blue;
  box-shadow: 0 0 4px 4px rgb(64, 64, 170);
}

